import React, { Component } from 'react'
import "./seachcenter.css"
import { NavBar, Icon, SearchBar } from "antd-mobile";
import myaxios from "../utils/myaxios"
import {withRouter} from "react-router-dom"
 class seachcenter extends Component {
    state={
        inputVal: "",
        productList :[],     // 产品列表
    }
        // 
        handDetailsClick=(e) => {
            // console.log(e.target.getAttribute("data-goods_id"))
           let good_id= e.target.getAttribute("data-goods_id")
            this.props.history.push("/productdetails/"+good_id);
        }
    // 确定
    getProductList=(params) => {
        // console.log("获取到数据啦")
        myaxios.get("goods/qsearch",{
           params:{
            query:this.state.inputVal
           }
        }).then(res=>{
            // console.log(res)
           this.setState({
                 productList:res
           })
            
        })
    }
    
   
    render() {
        return (
            <div className="seachcenter">
                <div className="yg-index-nav">
                    <NavBar
                        className="yg-sc-nav"
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >
                        搜索中心
                    </NavBar>
                    {/* 搜索中心输入框开始 */}
                    <SearchBar
                        className="yg-sc-search"
                        placeholder="Search"
                        value={this.state.inputVal}
                        // 是键盘 按下 enter 键触发
                        //   onSubmit={(value) => console.log(value, "onSubmit")}
                        // 清除输入内容时触发的
                        //   onClear={(value) => console.log(value, "onClear")}
                        // 聚焦的时候 触发
                        // onFocus={() => console.log("onFocus")}
                        // 失焦 触发
                        //   onBlur={() => console.log("onBlur")}
                        onCancel={() => this.getProductList()}
                        showCancelButton
                        cancelText="搜索"
                        // 内容改变的时候触发
                        onChange={(value) => {
                            // console.log(value);
                            this.setState({
                                inputVal: value,
                            });
                        }}
                    />
                    {/* 搜索中心输入框结束 */}
                </div>
                {/* 商品信息展示 */}
                <div className="merchandise-news">
                        <div className="news" onClick={this.handDetailsClick}>
                            {
                                this.state.productList.map(v=>{
                                    return <div className="listNews" key={v.goods_id} data-goods_id={v.goods_id}>
                                            {v.goods_name}
                                    </div>
                                })
                            }
                        </div>
                </div>

            </div>
        )
    }
}
export default withRouter(seachcenter)